<template>

    <div class="filter-container" style="padding-top: 0">

        <el-form
                :inline="true"
                :model="formData"
                label-position="right"
                size="small"
                class="filter-form-inline"
        >
            <el-row :gutter="20" style="margin-left: 0px; margin-right: 0px">
                <el-col :span="6">
                    <el-form-item label="客户类型" style="width: 100%">
                        <el-select
                                v-model="formData.customerType"
                                clearable
                                style="width: 100%"
                                placeholder="请选择类型"
                                @change="listSearch"
                        >
                            <el-option
                                    v-for="item in typeOption.filter(a=>a.value != 4)"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            >

                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="客户名称" style="width: 100%">
                        <el-input
                                v-model="formData.objectName"
                                clearable
                                placeholder="输入客户名称"
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="产品信息" style="width: 100%">
                        <el-select
                                v-model="formData.productId"
                                :loading="loading"
                                :remote-method="remoteMethod"
                                clearable
                                filterable
                                placeholder="请选择产品"
                                remote
                                reserve-keyword
                                @change="listSearch"
                        >
                            <el-option
                                    v-for="item in products"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                            />
                        </el-select>

                    </el-form-item>
                </el-col>

                <el-col
                        :span="2"
                >
                    <el-form-item style="width: 100%">
                        <more-search-btn v-model:is-more="visible"/>
                    </el-form-item>
                </el-col>


                <el-col :span="4">
                    <el-form-item style="width: 100%">
                        <el-button
                                class="border-btn"
                                @click="reset"
                        >重置</el-button>
                        <el-button
                                type="primary"
                                class="main-btn"
                                @click="listSearch"
                        >搜索</el-button>
                    </el-form-item>
                </el-col>

            </el-row>

            <el-row v-if="visible" :gutter="20" style="margin-left: 0px; margin-right: 0px">

                <el-col
                        :span="6"
                >
                    <el-form-item
                            label="关联营销任务"
                            style="width: 100%;"
                    >
                        <el-input
                                v-model="formData.taskNo"
                                clearable
                                placeholder="输入任务编号"
                        />
                    </el-form-item>
                </el-col>

                <el-col :span="6">
                    <el-form-item label="跟进职员" style="width: 100%">
                        <el-select
                                v-model="formData.headId"
                                clearable
                                style="width: 100%"
                                placeholder="请选择职员"
                                @change="listSearch"
                        >
                            <el-option
                                    v-for="item in headOptions"
                                    :key="item.id"
                                    :label="item.realName"
                                    :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

            </el-row>
        </el-form>

    </div>

    <table-view :data="tableData" :visible="visible" @row-click="rowClick">
        <el-table-column
                fixed="left"
                show-overflow-tooltip
                align="left"
                header-align="center"
                prop="customerNo"
                label="客户编号"
                :min-width="150"
        />
        <el-table-column
                show-overflow-tooltip
                align="center"
                header-align="center"
                label="客户类型"
                :min-width="100"
        >
            <template #default="{row}">
                {{getLabel('client_type',row.customerType)}}
            </template>
        </el-table-column>
        <el-table-column
                show-overflow-tooltip
                align="left"
                header-align="center"
                prop="objectName"
                label="客户名称"
                :min-width="150"
        />
        <el-table-column
                show-overflow-tooltip
                align="center"
                header-align="center"
                prop="productPopularName"
                label="通用名"
                :min-width="150"
        />
        <el-table-column
                show-overflow-tooltip
                align="center"
                header-align="center"
                prop="productName"
                label="商品名"
                :min-width="150"
        />
        <el-table-column show-overflow-tooltip align="center" header-align="center" prop="packSpecs" label="包装规格" :min-width="100"/>
        <el-table-column show-overflow-tooltip align="center" header-align="center" prop="producer" label="生产厂家" :min-width="150"/>
        <el-table-column
                align="center"
                header-align="center"
                label="关联营销任务"
                :min-width="150"
        >
            <template #default="{row}">
                {{row.taskNo}}
            </template>
        </el-table-column>
        <el-table-column
                align="center"
                header-align="center"
                label="合作意向"
                :min-width="100"
        >
            <template #default="{row}">
                {{getLabel("corporation",row.corporation)}}
            </template>
        </el-table-column>
        <el-table-column
                show-overflow-tooltip
                align="center"
                header-align="center"
                label="负责跟进职员"
                :min-width="150"
        >
            <template #default="scope">
                {{scope.row.headName}}
            </template>
        </el-table-column>
        <el-table-column
                align="center"
                header-align="center"
                label="最后跟进时间"
                :min-width="150"
        >
            <template #default="scope">
                <span v-if="scope.row.lastTime">{{dateFormat('yyyy-mm-dd HH:MM',scope.row.lastTime)}}</span>
            </template>
        </el-table-column>
        <el-table-column
                align="center"
                header-align="center"
                label="操作"
                fixed="right"
                :min-width="170"
        >
            <template #default="{row}">
                <template v-if="userInfo.ID == row.headId">
                    <el-button
                            type="text"
                            @click="onFollow(row)"
                    >写跟进</el-button>
                    <el-button
                            type="text"
                            @click="onCancel(row)"
                    >取消跟进</el-button>
                </template>
            </template>
        </el-table-column>
    </table-view>

    <Pagination
            v-model:page="formData.page"
            v-model:limit="formData.pageSize"
            style="display: flex; justify-content: flex-end"
            :total="total"
            @pagination="getList"
    />

    <registClientDialog ref="registClient" @success="getList"/>

    <addFollowDialog ref="addFollow" :datas="selectData" mode="client" @success="getList"/>

</template>

<script>
    import {getProductName} from "../../../../../../../../utils/commonFun";
    import { useRouter } from 'vue-router'
    import {crmStore} from "../../../../../../store";
    import { defineComponent, defineAsyncComponent, reactive, toRefs, inject, getCurrentInstance, ref, onMounted } from 'vue'
    export default defineComponent({
        name: "clientView",
        components:{
            registClientDialog:defineAsyncComponent(
                ()=>import('../../../modules/registClientDialog.vue')
            ),
            addFollowDialog:defineAsyncComponent(
                ()=>import('../../../modules/addFollowDialog.vue')
            )
        },
        setup(){
            const currentInstance = getCurrentInstance()
            const api = inject('api')
            const router = useRouter()
            const typeOption = crmStore.getters['dictionary/getDictionary']['client_type']
            const userInfo = crmStore.getters['user/userInfo']
            const headOptions = crmStore.getters['company/getHeadOptions']

            var data = reactive({
                visible:false,
                loading:false,
                tableData:[],
                formData:{
                    page:1,
                    pageSize:20,
                    customerType:'',
                    productId:'',
                    taskNo:'',
                    headId:'',
                    objectName:'',
                },
                total:0,
                products:[],
                registClient:null,
                addFollow:null,
                selectData:{}
            })

            const reset = () => {
                data.formData = {
                    page:1,
                    pageSize:20,
                    customerType:'',
                    productId:'',
                    taskNo:'',
                    headId:'',
                    objectName:'',
                }
                getList()
            }

            const listSearch = () => {
                data.formData.page = 1
                getList()
            }

            const getList = () => {
                let a = {...data.formData}
                a.headId = Number(a.headId)
                a.productId = Number(a.productId)

                api.task.TASK_CUSTOMER_LIST(a).then(res=>{
                    if (!res.code){
                        data.tableData = res.data.list
                        data.total = res.data.total
                    }else {
                        currentInstance.proxy.customMessage({type:'error',message:res.msg})
                    }
                })
            }

            const onFollow = (row) => {
                data.selectData = row
                console.log(data.selectData)

                setTimeout(()=>{
                    data.addFollow.open()
                },500)

            }

            const onCancel = (row) => {
                let str = ''
                if (row.customerType == 1){
                    str = '你确定取消跟进此客户？'
                }else if (row.customerType == 2){
                    str = '你确定取消跟进此客户？'
                }else if (row.customerType == 3){
                    str = '你确定取消跟进此终端吗？'
                }
                currentInstance.proxy
                    .alertBox({
                        message: str,
                        title: '取消跟进',
                    })
                    .then(() => {
                        api.task.TASK_CUSTOMER_CANCEL_FOLLOW_UP(row.id).then(res=>{
                            if (!res.code){
                                currentInstance.proxy.customMessage({type:'success',message:'取消成功'})
                                getList()
                            }else{
                                currentInstance.proxy.customMessage({type:'error',message:res.msg})
                            }
                        })
                    })
                    .catch((err) => {
                        console.log(err)
                    })
            }

            const create = () => {
                data.registClient.open()
            }

            const remoteMethod = (query) => {
                data.products = []
                data.loading = true

                if (query) {
                    const pam = {
                        keyWord: query,
                    }
                    api.common.GET_PRODUCT_LIST(pam).then((res) => {
                        if (!res.code && res.data) {
                            res.data.list.forEach(a => {
                                a.name = getProductName(a)
                            })
                            data.products = res.data.list

                        } else {
                            currentInstance.proxy.customMessage({type: 'error', message: res.msg})
                        }
                        data.loading = false
                    })
                } else {
                    data.loading = false
                }
            }

            const rowClick = (row,column) => {
                if (column.label === '操作') return
                router.push({name:'clientDetail',query:{id:row.id}})
            }

            onMounted(() => {
                getList()
            })

            return{
                ...toRefs(data),
                typeOption,
                userInfo,
                headOptions,

                getList,
                rowClick,
                reset,
                listSearch,
                onFollow,
                onCancel,
                remoteMethod,
                create,
            }
        }
    })
</script>

<style scoped>

</style>
